<template>
    <view class="flex-col homepage">
        <view class="flex-row wrapper">
            <view class="flex-col flex-row wraper-col">
                <view class="flex-row box">
                    <view class="u-line-1 text">{{self.name}}</view>
                    <view class="box-col">
                        <view class="u-line-1 text-two">{{self.relation}}</view>
                    </view>
                </view>
                <view class="u-line-1 text-three">{{self.number}}</view>
            </view>
            <view class="flex-col wraper-col-two" @click="cutPat">
                <u-icon class="icon-list" name="list"></u-icon>
                <view class="u-line-1 text-four">切换就诊人</view>
            </view>
        </view>
        <view class="flex-row wrapper-two">
            <view class="wraper-col-three">
                <view class="u-line-1 text-five">近一年</view>
            </view>
            <view class="wraper-col-four">
				<uni-datetime-picker type="daterange" v-model="single">
					<view class="u-line-1 text-six" @click="cutDate">选择时间</view>
				</uni-datetime-picker>
            </view>
        </view>
        <view @click="payDetails(record)" class="flex-col wrapper-three" v-for="record in record" style="margin-top: 5%;">
            <view class="u-line-1 text-seven" v-if="!!record.drugs">{{record.drugs.source}}费</view>
            <view class="flex-row wraper-row">
                <view class="flex-row box-two">
                    <view class="u-line-1 text-eight" v-if="!!record.divisionType">{{record.divisionType.divisionName}}</view>
                    <view class="u-line-1 text-nine" v-if="!!record.doctor">{{record.doctor.doctorName}}</view>
                </view>
                <view class="u-line-1 text-ten">￥{{record.price}}</view>
            </view>
            <view class="u-line-1 text-eleven">{{record.createTime}}</view>
            <view class="u-line-1 text-twelve"></view>
        </view>
		
		<!-- 切换就诊人弹出框 -->
		<u-popup  ref="popup" :show="isCut" mode="bottom" @close="cutDate">
			<view class="popopBox">
				<scroll-view
					scroll-y="true"
					style="height: 50rpx;"
					scroll-with-animation="true"
				>
				</scroll-view>
				<view @click="cutPatient(patient.id)" class="flex-row wrapper" v-for="patient in patient">
					<view class="flex-col flex-row wraper-col">
						<view class="flex-row box">
							<view class="u-line-1 text">{{patient.name}}</view>
							<view class="flex-row box-col">
								<view class="u-line-1 text-two">{{patient.relation}}</view>
							</view>
						</view>
						<view class="u-line-1 text-three">{{patient.number}}</view>
					</view>
				</view>
			</view>
		</u-popup>
		
    </view>
</template>
<script>
    export default {
        data() {
            return {
				isCut:false,
				URL: 'http://localhost:9000/', //主域名
				self: '',
				single:'',
				patient:[],
				record:[]
			}
        },
		watch:{
			single (newLength, oldLength) {
				this.single = newLength
			    console.log(newLength[0])
			    console.log(newLength[1])
				var begin = newLength[0]//获取开始时间
				var end = newLength[1]//获取结束时间
				
				this.drugRecordById(begin , end)
		
			}
		},
        methods: {
			
			//缴费详情页面
			payDetails(record){
				console.log(record.id)
				let data = {
					id:record.id,
					source:record.drugs.source,
					doctorName:record.doctor.doctorName,
					name:this.self.name,
					number:this.self.number,
					divisionName:record.divisionType.divisionName,
				}
				uni.navigateTo({
					url:"payDetails?msg="+JSON.stringify(data)
				})
			},
			
			//查询就诊人缴费记录
			drugRecordById(begin , end){
				uni.request({
					url:this.URL+"record/record/drug-record/drugRecordById/"+this.self.id + "/"+ begin + "/" + end,
					method:"GET",
					success: (res) => {
						console.log(res)
						if(res.data.code == 20000){
							this.record = res.data.data.record
							console.log(this.record)
						}
					}
				})
			},
			
			//关闭日期
			close(){
				this.isDate = false
			},
			
			//切换日期
			cutDate(){
				this.isDate = !this.isDate
			},
			
			//切换就诊人
			cutPat(){
				this.isCut = !this.isCut
			},
			
			//切换就诊人
			cutPatient(id){
				console.log(id)
				for (var i = 0; i < this.patient.length; i++) {
					if(id == this.patient[i].id){
						this.self = this.patient[i]
					}
				}
				this.isCut = false
				console.log(this.self)
				this.drugRecordById()
			},

        },
		onLoad(id) {
			console.log(id.id)
			// 获取当前用户绑定的就诊人
			uni.request({
				url: this.URL + "user/user/the-patient/patientByUserId/" + id.id,
				method: "GET",
				success: (res) => {
					console.log(res)
					if (res.data.code == 20000) {
						this.record = res.data.data.patientList
						this.patient = res.data.data.patientList
						for (var i = 0; i < this.record.length; i++) {
							if (this.record[i].relation == "本人") {
								this.self = this.record[i]
							}
						}
						console.log(this.self)
						// 查询当前就诊人的缴费记录
						this.drugRecordById()
					}
				}
			})
		}
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/

    .homepage {
        height: 1334rpx;
        padding: 60rpx 26rpx 0rpx 26rpx;

        .wrapper {
            width: 698rpx;
            justify-content: space-between;
            margin-bottom: 40rpx;
            padding: 19rpx 40rpx 19rpx 20rpx;
            background: #f5f9ff;

            .wraper-col {
                width: 246rpx;
                margin-top: 20rpx;

                .box {
                    width: 210rpx;
                    justify-content: space-between;
                    margin-bottom: 18rpx;

                    .text {
                        width: 118rpx;
                    }

                    .box-col {
                        width: 92rpx;
                        height: 38rpx;
                        margin-top: 4rpx;
                        border-radius: 40rpx;
                        background: #e2edfe;

                        .text-two {
                            width: 72rpx;
                            height: 100%;
                            letter-spacing: 4rpx;
                            top: -2rpx;
                            right: 6rpx;
                            position: absolute;
                            color: #7c88ff;
                        }
                    }
                }

                .text-three {
                    width: 100%;
                    font-size: 24rpx;
                    color: #aaadb2;
                }
            }

            .wraper-col-two {
                width: 148rpx;
                padding: 28rpx 0rpx 16rpx 6rpx;

                .icon-list {
                    width: 28rpx;
                    margin: 0rpx 0rpx 14rpx 54rpx;
                }

                .text-four {
                    width: 100%;
                }
            }
        }

        .wrapper-two {
            width: 266rpx;
            justify-content: space-between;
            margin-bottom: 20rpx;

            .wraper-col-three {
                width: 104rpx;
                padding: 2rpx 0rpx 0rpx 16rpx;
                border-radius: 40rpx;
                background: #006eff;

                .text-five {
                    width: 100%;
                    letter-spacing: 2rpx;
                    font-size: 2rpx;
                    color: #ffffff;
                }
            }

            .wraper-col-four {
                width: 136rpx;
                height: 38rpx;
                border-radius: 40rpx;
                background: #e4f0ff;

                .text-six {
                    width: 110rpx;
                    top: 2rpx;
                    right: 12rpx;
                    font-size: 2rpx;
                    position: absolute;
                }
            }
        }

        .wrapper-three {
            width: 100%;
            padding: 17rpx 0rpx 23rpx 20rpx;
            background: #ffffff;

            .text-seven {
                width: 154rpx;
                margin-bottom: 10rpx;
            }

            .wraper-row {
                width: 678rpx;
                justify-content: space-between;
                margin-bottom: 10rpx;
                padding-right: 1rpx;

                .box-two {
                    width: 269rpx;

                    .text-eight {
                        width: 150rpx;
                        margin-right: -30rpx;
                        font-size: 2rpx;
                        color: #aaadb2;
                    }

                    .text-nine {
                        width: 150rpx;
                        font-size: 2rpx;
                        color: #aaadb2;
                    }
                }

                .text-ten {
                    width: 176rpx;
                    font-size: 32rpx;
                    font-weight: 400;
                    color: #e51919;
                }
            }

            .text-eleven {
                width: 282rpx;
                font-size: 2rpx;
                color: #aaadb2;
            }

            .text-twelve {
                top: 10rpx;
                left: -26rpx;
                position: absolute;
            }
        }
    }
</style>